<template>
	<view class="content">
		<view class="top">
			<uni-datetime-picker v-model="range" type="datetimerange" @change="changetime" />
			<button size="mini" @click="changeSeach">查询</button>
		</view>
		<view class="main">
			<uni-table border stripe emptyText="暂无更多数据">
				<!-- 表头行 -->
				<uni-tr>
					<uni-th align="center" width="50">序号</uni-th>
					<uni-th align="center">起始位置</uni-th>
					<uni-th align="center">结束位置</uni-th>
					<uni-th align="center">采集时间</uni-th>
					<uni-th align="center" width="180">操作</uni-th>
				</uni-tr>
				<!-- 表格数据行 -->
				<uni-tr v-for="(item, index) in tableData" :key="index">
					<uni-td align="center">{{ index + 1 }}</uni-td>
					<uni-td align="center">{{ item.points.length ? item.points[0].gps.address : '' }}</uni-td>
					<uni-td align="center">{{ item.points.length ? item.points[item.points.length - 1].gps.address : '' }}</uni-td>
					<uni-td align="center">{{ item.points.length ? item.points[0].time : '' }}至{{ item.points.length ? item.points[item.points.length - 1].time : '' }}</uni-td>
					<uni-td align="center">
						<button size="mini" @click="changeTrajectory(item)" style="margin-right: 10rpx">查看轨迹</button>
						<button size="mini" @click="changeDel(item)" :disabled="disabled">删除</button>
					</uni-td>
				</uni-tr>
			</uni-table>
		</view>
	</view>
</template>

<script>
import { getCurrentDate, getSevenDaysAgoDate } from '@/utils/index.js';
export default {
	data() {
		return {
			range: [],
			tableData: [],
			pageIndex: 1,
			pageSize: 20,
			total: 0,
			disabled: true
		};
	},
	onLoad() {
		this.range = [getSevenDaysAgoDate(), getCurrentDate()];
	},
	onShow() {
		this.disabled = uni.getStorageSync('userinfo').type != 1;
		this.getList();
	},
	onPullDownRefresh() {
		this.pageIndex = 1;
		this.getList();
	},
	onReachBottom() {
		if (this.pageIndex * this.pageSize < this.total) {
			this.pageIndex += 1;
			this.getList();
		}
	},
	methods: {
		changetime(e) {
			console.log(e, '选择的数据');
			this.range = e;
		},

		// 搜索数据
		changeSeach() {
			if (!this.range.length) {
				uni.showToast({
					icon: 'none',
					title: '请选择时间段'
				});
				return;
			}
			this.pageIndex = 1;
			this.getList();
		},

		// 查看轨迹
		changeTrajectory(item) {
			console.log(item, '电机的数据');
			uni.navigateTo({
				url: `/pages/history/playback?recordId=${item.recordId}&time=${JSON.stringify(this.range)}`
			});
		},

		// 删除
		changeDel(item) {
			console.log(item);
			uni.showModal({
				title: '提示',
				content: '删除后将无法找回，是否删除！',
				success: (res) => {
					if (res.confirm) {
						console.log('用户点击确定');
						this.$axios
							.delete(
								`/utils/locationRecord?token=${uni.getStorageSync('token')}&tenantId=${uni.getStorageSync('userinfo').tenantId}&userId=${
									uni.getStorageSync('userinfo').userId
								}&recordId=${item.recordId}`
							)
							.then(
								(res) => {
									console.log(res, '删除成功');
									uni.showToast({
										icon: 'none',
										title: '删除成功'
									});
								},
								(err) => {
									console.log('删除失败');
									uni.showToast({
										icon: 'none',
										title: '删除失败'
									});
								}
							);
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},

		// 查询数据
		getList() {
			this.$axios
				.get('/utils/locationRecord', {
					params: {
						token: uni.getStorageSync('token'),
						tenantId: uni.getStorageSync('userinfo').tenantId,
						userId: uni.getStorageSync('userinfo').userId,
						startTime: this.range[0],
						endTime: this.range[1],
						pageIndex: this.pageIndex,
						pageSize: this.pageSize
					}
				})
				.then((res) => {
					console.log('查询的数据', res);
					this.tableData = this.pageIndex == 1 ? res.data.records : this.tableData.concat(res.data.records);
					this.total = res.data.totalPage;
					uni.stopPullDownRefresh();
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	width: 750rpx;

	.top {
		width: 750rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 20rpx 0;
		padding: 0 20rpx;
		box-sizing: border-box;

		button {
			height: 70rpx;
			margin-left: 10rpx;
			line-height: 70rpx;
		}
	}
}
</style>
